<template>
     <div class="shopbox" v-show="visible" @click="change">
        <div class="shopcar" @click.stop="">
            <div class="title">
                <h4>已选商品</h4>
                <div @click="clear">清空</div>
            </div>
            <div class="empty" v-show="shop_cart_list.length==0">购物车空空如也，快去选购商品吧！</div>
            <div class="banner-list">
                <div class="list" v-for="(item,index) in shop_cart_list" :key="index">
                    <img :src="item.picture" alt="">
                    <div class="text">
                        <h5>{{item.name}}</h5>
                        <div class="price">
                            <span>￥{{item.min_price}}</span>
                            <div class="btn">
                                <button @click="reduce(item)">-</button>
                                <span> {{item.count}} </span>
                                <button @click="add(item)">+</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState,mapActions,mapGetters } from 'vuex'
import {shopcart_list} from '.././utils/api'
import pic from "../assets/3.png"
export default {
    data(){
        return {
        visible:false,
        }
    },
    computed:{
        ...mapState(['shop_cart_list']),
    },
    methods: {
         ...mapActions(['request_clearshopcart']),
         ...mapActions(['request_addshopcart','request_redshopcart']),
        change(){
            this.visible=!this.visible
        },
       reduce(item) {
        this.request_redshopcart(item)
       },
       add(item) {
        this.request_addshopcart(item)
       },
       clear() {
        this.request_clearshopcart()
       }
   },
}
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

.shopbox {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 667px;
    background-color: rgba(93, 91, 91, 0.6);
}

.shopcar {
    width: 100%;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    padding: 15px;
    background-color: white;
}

.title {
    display: flex;
    font-weight: bolder;
    justify-content: space-between;
}
.empty{
    height: 200px;
    line-height: 200px;
    text-align: center;
    margin-bottom: 50px;
}
.banner-list{
    margin-bottom: 60px;
}
.list {
    display: flex;
    margin-bottom: 20px;
}

.list img {
    width: 80px;
    height: 80px;
}

.list .text {
    display: flex;
    margin-left: 15px;
    flex-direction: column;
    justify-content: space-between;
}

.list .text h5 {
    font-weight: bolder;
}

.list .price {
    display: flex;
    justify-content: space-between;
}

.list .btn {
    position: fixed;
    right: 15px;
}

.list .price span:first-child {
    color: red;
}

.list button {
    width: 20px;
    height: 20px;
    border: none;
    color: white;
    background-color: rgb(24, 165, 220);
    border-radius: 50%;
}

</style>